<template>
  <view class="fail-container">
    <!-- <image src="/static/fail.png" mode="widthFix" class="fail-img" /> -->
    <view class="fail-info">闯关失败</view>
    <button @click="retry">重试</button>
    <button @click="watchAd">跳过（看广告）</button>
    <button @click="goBack">返回</button>
  </view>
</template>

<script setup>
const retry = () => {
  uni.redirectTo({ url: '/pages/play/play' })
}

const watchAd = () => {
  uni.showToast({ title: '广告功能开发中', icon: 'none' })
  uni.redirectTo({ url: '/pages/play/play' })
}

const goBack = () => {
  uni.navigateBack()
}
</script>

<style scoped>
.fail-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #fff;
}
.fail-img {
  width: 80vw;
  margin-bottom: 40rpx;
}
.fail-info {
  font-size: 40rpx;
  color: #e43;
  margin-bottom: 40rpx;
}
button {
  width: 60vw;
  margin: 20rpx 0;
}
</style> 